﻿.TransparentFormsToggleButton {
    transition: 0.2s;
    align-content: center;
    vertical-align: middle;
    overflow: hidden;
    min-width: 110px;
    width: auto;
    height: 30px;
    position: relative;
    -webkit-appearance: none;
    background: none;
    background-color: rgb(0 0 0 / 0.00);
    border: 2px solid var(--BackgroundGrey);
    border-radius: 4px;
    cursor: pointer;
    outline: none;
}


    .TransparentFormsToggleButton:checked {
        background-color: rgb(0 60 103);
    }

        .TransparentFormsToggleButton:checked::after {
            color: white;
        }

    .TransparentFormsToggleButton:focus {
        outline: none;
    }

    .TransparentFormsToggleButton::after {
        color: black;
        font-size: 15px;
        display: block;
        content: attr(placeholder);
        font-family: Montserrat-Bold;
        text-align: center;
        padding-top: 3px;
    }



.ToggleCheckBox {
    transition: 0.2s;
    vertical-align: middle;
    overflow: hidden;
    min-width: 67px;
    max-width: 67px;
    height: 30px;
    position: relative;
    -webkit-appearance: none;
    background: none;
    background-color: rgb(0 0 0 / 0.00);
    border: 2px solid rgb(167 169 170);
    border-radius: 20px;
    cursor: pointer;
    outline: none;
}

    .ToggleCheckBox.Small {
        transform: scale(0.75);
        margin-left: -7px; /*to offset scale*/
    }

    .ToggleCheckBox::placeholder {
        color: rgb(167 169 170);
        font-size: 200px;
    }

    .ToggleCheckBox:checked::before {
        background-color: #444F57;
        transform: translate(37px,0px);
    }

    .ToggleCheckBox::before {
        background-color: rgb(167 169 170);
        width: 26px;
        height: 26px;
        border-radius: 20px;
        position: absolute;
        transition: 0.1s;
        content: '';
    }

    .ToggleCheckBox:hover::before {
        background-color: #444F57;
    }

    .ToggleCheckBox:hover {
        border-color: #444F57;
    }

        .ToggleCheckBox:checked {
            border-color: #444F57;
        }

    .ToggleCheckBox:hover:checked {
        border-color: #444F57;
    }

    .ToggleCheckBox:focus {
        outline: 0 !important;
    }
